<template>
  <ul class="x-menu-list">
    <li class="x-menu-list-item">
      <div class="x-color-palette">
        <a href="javascript:;" v-for="(item, index) in colorArray" :key="index" hidefocus="on" @click="pickColor(item.color)">
          <em>
            <span :style="`background:`+item.color" unselectable="on">&nbsp;</span>
          </em>
        </a>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  data(){
    return {
      colorArray: [{
        color: '#000000'
      },{
        color: '#993300'
      },{
        color: '#333300'
      },{
        color: '#003300'
      },{
        color: '#003366'
      },{
        color: '#000080'
      },{
        color: '#333399'
      },{
        color: '#333333'
      },{
        color: '#800000'
      },{
        color: '#FF6600'
      },{
        color: '#808000'
      },{
        color: '#008000'
      },{
        color: '#008080'
      },{
        color: '#0000FF'
      },{
        color: '#666699'
      },{
        color: '#808080'
      },{
        color: '#FF0000'
      },{
        color: '#FF9900'
      },{
        color: '#99CC00'
      },{
        color: '#339966'
      },{
        color: '#33CCCC'
      },{
        color: '#3366FF'
      },{
        color: '#800080'
      },{
        color: '#969696'
      },{
        color: '#FF00FF'
      },{
        color: '#FFCC00'
      },{
        color: '#FFFF00'
      },{
        color: '#00FF00'
      },{
        color: '#00FFFF'
      },{
        color: '#00CCFF'
      },{
        color: '#993366'
      },{
        color: '#C0C0C0'
      },{
        color: '#FF99CC'
      },{
        color: '#FFCC99'
      },{
        color: '#FFFF99'
      },{
        color: '#CCFFCC'
      },{
        color: '#CCFFFF'
      },{
        color: '#99CCFF'
      },{
        color: '#CC99FF'
      },{
        color: '#FFFFFF'
      }]
    }
  },
  methods: {
    pickColor(val) {
      this.$emit('click', val)
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
    padding-inline-start: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
}
.x-menu-list-item {
  font: normal 11px tahoma, arial, sans-serif;
  white-space: nowrap;
  -moz-user-select: none;
  -khtml-user-select: none;
  display: block;
  padding: 1px;
}
.x-color-palette {
  width: 150px;
  height: 92px;
  cursor: pointer;
}
.x-color-palette a {
  border: 1px solid #fff;
  float: left;
  padding: 2px;
  text-decoration: none;
  -moz-outline: 0 none;
  outline: 0 none;
  cursor: pointer;
}
.x-color-palette em {
  display: block;
  border: 1px solid #aca899;
}
.x-color-palette em span {
  cursor: pointer;
  display: block;
  height: 10px;
  line-height: 10px;
  width: 10px;
}
</style>